// import logo from './logo.svg';
import './App.css';

import React from 'react'

// import NameCard from './components/NameCard'
// <NameCard name="Boloog" number="1212" isHuman tags={tags} logo={logo}/> 

import DigitalClock from './components/DigitalClock'
import CommentList from './components/CommentList'
import Forms from './components/Forms'
import ThemeBar from './components/ThemeBar'

import ThemeContent from './theme-context'
// function App(props) {
//   return (
//     <div className="App">
//       <DigitalClock />
//       <CommentList comments={this.state.comments}/>
//       <Forms commentsLength={comments.length}/>
//     </div>
//   );
// }

const themes = {
  light: {
    classname: 'btn btn-primary',
    bgColor: '#eee',
    color: '#000'
  },
  dark: {
    classname: 'btn btn-light',
    bgColor: '#222',
    color: '#fff'
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: ['List group item heading'],
      theme: 'light'
    }

    this.addComment = this.addComment.bind(this)
    this.deleteComment = this.deleteComment.bind(this)
    this.changeTheme = this.changeTheme.bind(this)
  }

  deleteComment(e) {
    const index = e.target.getAttribute("data-index")
    const comments = this.state.comments;
    comments.splice(index, 1);
    this.setState({ comments: comments })

  }

  addComment(comment) {
    if (comment) {
      this.setState({
        comments: [...this.state.comments, comment]
      })
    }
  }

  changeTheme(theme) {
    this.setState({theme})

  }
  render() {
    const { comments } = this.state
    return (
      <ThemeContent.Provider value={ themes[this.state.theme]}>
      <div className="container">
        <DigitalClock />
        <CommentList comments={comments} onDeleteComment={this.deleteComment} />
        <Forms onAddComment={this.addComment} />

        <div className="btn-group" role="group" aria-label="Basic example">
          <button type="button" className="btn btn-light" onClick={() => this.changeTheme('light')} >浅色主题</button>
          <button type="button" className="btn btn-secondary" onClick={() => this.changeTheme('dark')}>深色主题</button>
        </div>
        <ThemeBar />
      </div>
      </ThemeContent.Provider>
    );

  }
}

export default App